<template>
	<!-- 个人管控任务 -->
	<view class="flex-col h100">
		<view class="">
			<u-navbar title="个人任务管理" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC"
				:autoBack="true">
				<template #right>
					<u-icon name="plus" color="#fff" size="25" @click="addWork"></u-icon>
					<u-icon name="hourglass" color="#fff" size="25" @click="openPopup"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="p-10">
			<u-sticky class="p-10" style="background-color: #fff;">
				<u-subsection :list="tabList" activeColor="#2172FC" :current="currentKey" mode="subsection"
					@change="handleTabClick"></u-subsection>
			</u-sticky>
			<template v-if="list.length > 0">
				<view class="card"
					v-for="(item,index) in (currentKey == 2 ? list.filter(l => l.showRecieveAndRejectSign == 1) : list)"
					:index="index" @click="goDetail(item)">
					<view class="flex m-between">
						<text class="fw">{{item.riskControlTypeName}}</text>
						<text
							:style="{color: currentKey == 0 ? 'orangered' : 'green'}">{{currentKey == 0 ? '待处理' : '已完成'}}</text>
					</view>
					<view v-if="item.riskControlName">
						<text>排查名称: {{item.riskControlName}}</text>
					</view>
					<view class="">
						<text>风险等级: {{item.riskLevelNames}}</text>
					</view>
					<view class="">
						<text>管控时间: {{item.riskControlDate}}</text>
					</view>
					<view class="">
						<text>管控地点: {{item.riskLocationName}}</text>
					</view>

				</view>
			</template>
			<u-empty v-else mode="data">
			</u-empty>
		</view>
	</view>
	<my-popup :show="showPopup" :queryParams="queryParams" :formItem="formData" @close="closePopup" @reset="reset"
		@submit="submit"></my-popup>
	<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
</template>
<script setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	import useList from '@/hooks/useList.js'
	import {
		pageControlInfo
	} from '@/api/riskcontrol.js'

	let currentKey = ref(0),
		queryParams = reactive({
			needCount: 1,
			pageNum: 1,
			pageSize: 10,
			riskControlState: 0,
			startTime: '',
			endTime: '',
			time: []
		}),
		tabList = [{
			name: '待排查',
		}, {
			name: '已排查',
		}],
		formData = ref([{
			label: '管控类型',
			type: 'GETcontrolType',
			itemType: 'select',
			prop: 'riskControlType'
		}, {
			itemType: 'date',
			type: 'daterange',
			label: '管控时间',
			prop: 'time'
		}])
	// 重置表单
	const reset = () => {
		queryParams.time = []
		queryParams.startTime = ''
		queryParams.endTime = ''
		queryParams.riskControlType = ''
		getListData()
		showPopup.value = false
	}
	// 查询
	const submit = () => {
		queryParams.startTime = queryParams?.time[0]
		queryParams.endTime = queryParams?.time[1]
		getListData()
		showPopup.value = false
	}
	const handleTabClick = (index) => {
		currentKey.value = index
		queryParams.riskControlState = index
		queryParams.pageNum = 1
		getListData()
	}
	const {
		getListData,
		list,
		scrollTop,
		showPopup,
		openPopup,
		closePopup
	} = useList({
		queryParams,
		api: {
			page: pageControlInfo
		}
	})
	// 新增任务
	const addWork = () => {
		uni.navigateTo({
			url: '/pages/professional/main/personalControl/add'
		})
	}
	const goDetail = (item) => {
		uni.navigateTo({
			url: '/pages/professional/main/personalControl/detail?data=' + JSON.stringify(item) + '&key=' +
				currentKey.value
		})
	}
	onShow(() => {
		getListData()
	})
</script>
<style lang="scss" scoped>
	.custom-style {
		width: 200rpx;
	}

	.content {
		flex: 1;
		margin: 20rpx;
		border-radius: 20rpx;
	}
</style>